﻿@using PagedList;
@using PagedList.Mvc;
@using YuFeng.Models.Product;
@model PagedList.IPagedList<Product>
@{
    ViewBag.SecondTitle = "产品介绍";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var type = Request["type"];
}
<div class="page-wrap">
    @Html.Partial("_Header")
    <div class="content clearfix">
        <img src="~/assets/images/product-1.jpg" />
        <ul class="product-menu">
            @foreach (ProductCategory category in ViewBag.Categorys)
            {
                <li class="menu-li" data-isopened="false" data-type="1">
                    <p class="menu-p">@category.Name</p>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                    <ul class="product-ul">
                        @if (Model.Where(o=>o.LevelTypeOne==category.Id).Count()>0)
                        {
                            foreach (Product product in Model.Where(o => o.LevelTypeOne == category.Id))
                            {
                                <li class="product-li">
                                    <div class="col-xs-3 no-padding">
                                        <a href="/Home/ProductDetail?id=@product.Id"><img class="product-title-img" src="@YuFeng.Web.Helpers.FilesHelper.GetProductImg(product.TitleImg)" /></a>
                                    </div>
                                    <div class="col-xs-9">
                                        <a href="/Home/ProductDetail?id=@product.Id"><p>@product.Name</p></a>
                                    </div>
                                </li>
                            }
                        }
                        else
                        {
                            <li><p class="text-center">暂无产品</p></li>
                        }
                    </ul>
                </li>
            }
        </ul>
    </div>
    @Html.Partial("_Footer")
</div>
@section scripts
{
    <script type="text/javascript">
        var preLoading = function (events) {
            var images = [];
            var imgs = document.images;
            for (var i = 0; i < imgs.length; i++) {
                images.push(imgs[i].src);
            }

            @*images.push('@Url.Content("~/assets/images/banner-1.png")');
            images.push('@Url.Content("~/assets/images/logo.png")');
            images.push('@Url.Content("~/assets/images/menu-1.png")');
            images.push('@Url.Content("~/assets/images/menu-2.png")');
            images.push('@Url.Content("~/assets/images/menu-3.png")');
            images.push('@Url.Content("~/assets/images/menu-4.png")');
            images.push('@Url.Content("~/assets/images/menu-5.png")');*@

            imgLoading(images, {
                complete: function () {
                    events.complete();
                }
            });
        };
        $(function () {
            preLoading({
                complete: function () {
                    // 页面预加载结束；
                    $(".loader").hide();
                    $(".page-wrap").show();
                }
            });

            var type = '@type';
            if (type) {
                var li = $(".product-menu li[data-type=" + type + "]");
                OpenLi(li);
            }

            $(".menu-li").on("click", function () {
                var status = $(this).data("isopened");
                if (!status) {
                    OpenLi(this);
                }
                else {
                    CloseLi(this);
                }
            });

            $(".product-ul").on("click", function () {
                event.stopPropagation();
            });
        });

        function OpenLi(target) {
            $(target).find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            $(target).find(".product-ul").show(100);
            $(target).data("isopened", true);
        }
        function CloseLi(target) {
            $(target).find(".glyphicon").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            $(target).find(".product-ul").hide(100);
            $(target).data("isopened", false);
        }
    </script>
}




